import styles from './index.less';
import { message, Button, Spin } from "antd";
import { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';

export default () => {
  const [loading, setLoading] = useState<boolean>(false);
  const info = () => {
    setLoading(true);
    fetch("/api/count/")
      .then(res => res.json())
      .then(data => {
        setLoading(false);
        console.log(data)
        if (data.status!=0){
          throw new Error(data.msg)
        }
        message.info(`当前的计数结果是 ${data.data.count}`);
      })
      .catch((error) => {
        setLoading(false);
        message.error(error.message);
      });
  };
  return (
    <PageContainer content="点击按钮从后端获取计数结果！" className={styles.main}>
      <div className={styles.container}>
        <div id="components-message-demo-info">
          <Button type="primary" onClick={info}>
            获取计数器结果
      </Button>
        </div>
      </div>
      <Spin spinning={loading} size="large" delay={100} />
    </PageContainer>
  );
};
